<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie">

    <div class="pageTabContent" id="moviesTab" data-index="0">
        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
            <div class="paging"></div>
            <button is="paper-icon-button-light" class="btnPlayAll autoSize hide" title="${HeaderPlayAll}"><span class="material-icons play_arrow" aria-hidden="true"></span></button>
            <button is="paper-icon-button-light" class="btnShuffle autoSize hide" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
            <div class="btnFilter-wrapper">
                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_alt" aria-hidden="true"></span></button>
            </div>
        </div>

        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
        </div>

        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
        </div>
        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
            <div class="paging"></div>
        </div>
    </div>
    <div class="pageTabContent" id="suggestionsTab" data-index="1">
        <div id="resumableSection" class="verticalSection hide">
            <div class="sectionTitleContainer sectionTitleContainer-cards">
                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
            </div>

            <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right">
            </div>
        </div>

        <div class="verticalSection">
            <div class="sectionTitleContainer sectionTitleContainer-cards">
                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestMovies}</h2>
            </div>

            <div is="emby-itemscontainer" id="recentlyAddedItems" class="itemsContainer padded-left padded-right">
            </div>
        </div>

        <div class="recommendations">
        </div>
        <div class="noItemsMessage hide padded-left padded-right">
            <br />
            <p>${MessageNoMovieSuggestionsAvailable}</p>
        </div>
    </div>
    <div class="pageTabContent" id="favoritesTab" data-index="2">
        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
            <div class="paging"></div>
            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
        </div>

        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
        </div>
        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
            <div class="paging"></div>
        </div>
    </div>
    <div class="pageTabContent" id="collectionsTab" data-index="3">
        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
            <div class="paging"></div>
            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
            <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize" title="${NewCollection}"><span class="material-icons add" aria-hidden="true"></span></button>
        </div>

        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
        </div>

        <div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered padded-left padded-right" style="text-align:center;">
        </div>
        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
            <div class="paging"></div>
        </div>
    </div>
    <div class="pageTabContent" id="genresTab" data-index="4">
        <div id="items"></div>
    </div>
</div>
